<!--  -->
<template>
  <Card>
    <tree-select :isShowadd="true"></tree-select>
    <Layout>
      <Content>
        <Table
          class="table"
          width="1600"
          stripe
          :columns="columns1"
          :data="data"
          @on-selection-change="isselectd"
        >
          <template slot-scope="{ row }" slot="post">
            <span v-for="(item, index) in row.post" :key="index + 'row'">
              {{ item.status === 1 ? '已结' : '未结' }}
            </span>
          </template>
          <template slot-scope="{ row }" slot="status">
            <span v-for="(item, index) in row.user" :key="index + 'row'">
              {{ item.status === '0' ? '正常' : '异常' }}
            </span>
          </template>
        </Table>
        <Page
          :total="data.length"
          size="small"
          :current="pagenum"
          :page-size="pageSize"
          @on-change="changepage"
          show-elevator
          show-sizer
          class="total"
        />
        <Button type="primary" @click="del" :disabled="this.id.length == 0"
          >批量删除</Button
        >
        <Button type="primary" @click="del" :disabled="this.id.length == 0"
          >批量设置</Button
        >
        <Button
          type="primary"
          :loading="exportLoading"
          icon="ios-add-circle-outline"
          @click="exportExcel"
          >导出为ctx文件</Button
        >
      </Content>
    </Layout>
  </Card>
</template>
<script>

import TreeSelect from '@/view/components/tree-select/index.vue'
import { getUser, delUser } from '@/api/user'
import excel from '@/libs/excel'
export default {
  name: '',
  components: {
    TreeSelect
  },
  data () {
    return {
      exportLoading: false,
      pagenum: 1,
      pageSize: 10,
      pagetotal: 9,
      historyData: [],
      id: [],
      columns1: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
          _checked: true,
        },
        {
          title: '用户昵称',
          key: 'name',
          width: 200
        },
        {
          title: '登录名',
          key: 'username',
          sortable: true
        },
        {
          title: '角色',
          key: 'roles',
          render: (h, params) => {
            let text = ''
            for (var i in params.row.roles) {
              text = params.row.roles
            }
            return h("div", {
              props: {
              }
            }, text)
          }
        },
        {
          title: '积分',
          key: 'favs',

        },
        {
          title: '是否禁用',
          align: 'center',
          render: (h, params) => {
            let show = ''
            if (params.row.status === '0') {
              show = '否'
            } else {
              show = '是'
            }
            return h("div", {
              props: {}
            }, show)
          }

        },
        {
          title: '是否为会员',
          align: 'center',
          render: (h, params) => {
            let show = ''
            if (params.row.isVip === '0') {
              show = '否'
            } else {
              show = '是'
            }
            return h("div", {
              props: {}
            }, show)
          }

        },
        {
          title: '创建时间',
          key: 'created',
        },
        {
          title: 'Action',
          key: 'action',
          fixed: 'right',
          width: 120,
          render: (h, params) => {
            return h('div', [
              h('icon', {
                props: {
                  type: 'md-build',
                  size: 20,
                }
              }, 'sz'),
              h('icon', {
                props: {
                  type: 'ios-trash',
                  size: 20
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, 'del')
            ]);
          }
        }
      ],
      data: [],
    };
  },

  computed: {},

  mounted () {
    // this.init()
    this.getAllusers()
  },

  methods: {
    changepage (index) {
      let self = this
      let _start = (index - 1) * this.pageSize;
      let _end = index * this.pageSize;
      this.historyData = this.list.slice(_start, _end)
    },
    exportExcel () {
      if (this.data.length) {
        this.exportLoading = true
        const params = {
          title: ['用户昵称', '登录名', '角色', '积分', '是否禁用', '是否为会员', '创建时间'],
          key: ['name', 'username', 'roles', 'favs', 'status', 'isVip', 'created'],
          data: this.data,
          autoWidth: true,
          filename: '用户信息表'
        }
        excel.export_array_to_excel(params)
        this.exportLoading = false
      } else {
        this.$Message.info('表格数据不能为空！')
      }
    },
    del () {
      this.$confirm('你确定要删除这些用户吗？', () => {
        let ids = ""
        this.id.forEach((e) => {
          ids += e._id + ","
        });
        ids = ids.substring(0, ids.length - 1)
        delUser(ids).then(res => {
          if (res.code === 200) {
            this.getAllusers()
          }
        })
      }, () => { })
    },
    isselectd (selection) {
      this.id = selection
    },
    remove (index) {
      this.$confirm('你确定删除该数据', () => {
        this.data.splice(index, 1)
        let ids = row._id
        delUser(ids).then(res => {
          if (res.code === 200) {
            this.$alert('删除成功')
          }
        })
      }, () => { })
    },
    noeye (index) {
      //对数进行操作
      this.data1.splice(index, !isShow)

      //换图标
    },
    getAllusers () {
      getUser().then(res => {
        if (res.code === 200) {
          this.data = res.data
        }
      })
    },
    handleSelectAll (index) {
      console.log(index);
    },

  }
}

</script>
<style  lang='scss' >
.total {
  display: flex;
  float: right;
}
.ivu-icon {
  cursor: pointer;
}
.ivu-btn {
  margin: 5px 15px 0 0px;
}
</style>